<template>
  <!-- 菜单组件 -->
  <div v-for="item in leftMenuList" :key="item.frontId">
    <el-sub-menu :index="item.frontRouter" v-if="item.children && item.children.length > 0 && item.type == 'NODE'">
      <template #title>
        <span v-if="item.icon" class="iconfont" :class="'icon-' + item.icon"></span>
        <span v-else class="iconfont icon-yingxiaochuda"></span>
        <span v-if="!showSide">{{ item.name }}</span>
      </template>
      <MenuTree :leftMenuList="item.children"></MenuTree>
    </el-sub-menu>
    <el-menu-item v-else-if="item.parentId==0&&item.type == 'PAGE'" 
      :index="item.frontRouter" @click="toUrl(item.frontRouter)">
      <template #title>
        <span v-if="item.icon" class="iconfont" :class="'icon-' + item.icon" style="padding-right: 17px"></span>
        <a :href="'#' + item.frontRouter"><span v-if="!showSide">{{ item.name }}</span></a>
      </template>
    </el-menu-item>
    <el-menu-item v-else-if="item.type == 'PAGE'" style="padding-left: 55px"
      :index="item.frontRouter" @click="toUrl(item.frontRouter)">
      <template #title>
        <a :href="'#' + item.frontRouter"><span v-if="!showSide">{{ item.name }}</span></a>
      </template>
    </el-menu-item>
  </div>
</template>
<script lang="ts">
export default {
  name: "MenuTree",
};
</script>
<script lang="ts" setup>
const menuList = defineProps({
  leftMenuList: {
    type: Array,
    default: () => [] as Array<any>,
  },
  showSide: {
    type: Boolean,
    default: false,
  },
});
const store=useStore()
const router=useRouter()
const leftMenuList=computed(() => {
  return menuList.leftMenuList
})
const toUrl=(url:string)=>{
  store.commit('SETBOOKLIST',{
    path:url,
    service:store.state.user.currentService
  })
  router.push(url)
}
</script>
<style lang="scss" scoped>
:deep(.el-menu-item [class^="el-icon"]) {
  width: 16px;
}

a {
  text-decoration: none;
}
</style>
